<template>
  <div class="content">
    <div  class="md-layout">
      <div class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-50" style="height: 50%">
        <md-card>
          <md-card-header data-background-color="green">
            <h4 class="title">摄像头1</h4>
            <p class="category">
              主要用于检测老人表情状态以及陌生人识别
            </p>
          </md-card-header>
          <md-card-content style="text-align: center">
            <iframe
                id="iframeId"
                frameborder="0"
                style="width: 150px; height: 100px;"
                :src="'http://zdz0132.natapp1.cc/strangerAndEmotion'"
            >
            </iframe>
          </md-card-content>
        </md-card>
      </div>

      <div class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-50">
        <md-card>
          <md-card-header data-background-color="green">
            <h4 class="title">摄像头2</h4>
            <p class="category">
              主要用于检测老人表情状态以及陌生人识别
            </p>
          </md-card-header>
          <md-card-content style="text-align: center">
            <iframe
                id="iframeId1"
                frameborder="0"
                style="width: 150px; height: 100px; margin:0;"
                :src="'http://ghy.natapp1.cc/strangerAndEmotion'"
            >
            </iframe>
          </md-card-content>
        </md-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Expression",
  data() {
    return {
      monitorId: "",
      videoSrc: "",
      options: [
        {
          value: "1",
          label: "摄像头1",
        },
        {
          value: "2",
          label: "摄像头2",
        },
        {
          value: "3",
          label: "摄像头3",
        },
        {
          value: "4",
          label: "摄像头4",
        },
        {
          value: "5",
          label: "摄像头5",
        },
      ],
    };
  },

  mounted() {
    /**
     * iframe-宽高自适应显示
     */
    const oIframe = document.getElementById("iframeId");
    const oIframe1 = document.getElementById("iframeId1");
    const oIframe2 = document.getElementById("iframeId2");
    const deviceWidth = document.documentElement.clientWidth;
    const deviceHeight = document.documentElement.clientHeight;
    oIframe.style.width = Number(deviceWidth) - 220 + "px"; //数字是页面布局宽度差值
    oIframe.style.height = Number(deviceHeight) - 120 + "px"; //数字是页面布局高度差
    oIframe1.style.width = Number(deviceWidth) - 220 + "px"; //数字是页面布局宽度差值
    oIframe1.style.height = Number(deviceHeight) - 120 + "px"; //数字是页面布局高度差
    oIframe2.style.width = Number(deviceWidth) - 220 + "px"; //数字是页面布局宽度差值
    oIframe2.style.height = Number(deviceHeight) - 120 + "px"; //数字是页面布局高度差
  },
  methods: {
    shiftCamera() {
      const frame = document.getElementById("iframeId");
      if (this.monitorId === "1")
        frame.src = "http://zdz0132.natapp1.cc/detectRegionInvasion";
      else if (this.monitorId === "2")
        frame.src = "http://zdz0132.natapp1.cc/strangerAndEmotion";
      else if (this.monitorId === "3")
        frame.src = "https://img1.sycdn.imooc.com/5d5e713c0001d62e08910614.png";
    },
    getImg() {
      alert("333");
      var that = this;
      this.$axios
          .get("http://zdz0132.natapp1.cc/video_viewer")
          .then((response) => {
            alert("111");
            // that.response = response.data;
            // this.tableData = response.data.data.info;
            console.log(response);
          })
          .catch(function (error) {
            alert("222");
            console.log(error);
          });
    },
  },
};
</script>
